<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例--上色</title>
    <link rel="stylesheet" href="index3.css">
</head>

<body>
    <div class="box">
        <!-- 上方 -->
        <div class="top">
            <!-- 标题 -->
            <div class="title">科技</div>
            <div class="tech">
                TECHNOLOGY
            </div>
            <div class="topImg">
                <img src="./images/fig1.png" alt="">
            </div>
        </div>
        <!-- 下方 -->
        <div class="bottom">
            <!-- left -->
            <div class="left">
                <!-- 列表 -->
                <ul>
                    <li class="n1">梦天成功发射!天空飘来一个字</li>
                    <li>将VR译为"灵境"!钱学森这些预言，正一个个成为现..</li>
                    <li>富士康目前情况如何?相关负责人最新发声:发放全勤奖</li>
                    <li>56支队伍激烈角逐，四大奖项尘埃落定，鲲鹏应用创新.</li>
                    <li>“打不过就加入”.…...京东淘宝双11结盟快手，剑指抖..</li>
                    <li>酒店如何实现智慧化升级?九号公司旗下九号机器人给出..</li>
                    <li class="n1">梦天成功发射!天空飘来一个字</li>
                    <li>将VR译为"灵境"!钱学森这些预言，正一个个成为现..</li>
                    <li>富士康目前情况如何?相关负责人最新发声:发放全勤奖</li>
                    <li>56支队伍激烈角逐，四大奖项尘埃落定，鲲鹏应用创新.</li>
                    <li>“打不过就加入”.…...京东淘宝双11结盟快手，剑指抖..</li>
                    <li>酒店如何实现智慧化升级?九号公司旗下九号机器人给出..</li>
                </ul>
            </div>
            <!-- 中间 -->
            <div class="middle">
                <div class="middle-top">| 科技图片</div>
                <div class="middle-middle">
                    <img src="./images/a" alt="">
                    <div>荣县以“茶”为媒尽揽油茶合作大单 “四</div>
                </div>
                <div class="middle-bottom">
                    <div class="middle-bottom-left">
                      <img src="" alt="">
                      <div>《羊了个羊》还没通关?有人已经要</div>
                    </div>
                    <div class="middle-bottom-right">
                        <img src="" alt="">
                        <div>北京卫视x京东晚八点音乐会发布节</div>
                    </div>
                </div>
            </div>
            <!-- 右 -->
            <div class="right">
                <!-- 科技数码 -->
                <div class="right-top">
                    | 科技数码
                </div>
                <!-- 中间图片 标题 左右 -->
                <div class="right-middle">
                      <!-- 左边图片 -->
                      <div class="div1">
                        <img src="" alt="">
                      </div>
                      <!-- 右边盒子分三块 -->
                      <div class="div2">
                          <!-- 上 -->
                          <div class="div2-top">
                            你给毛孩子换口粮了吗?烘焙粮同比增长96
                          </div>
                          <!-- 中间题 -->
                          <div class="div2-zhong">
                            钱江晚报·小时新闻记者鲁佳10月31日
                          </div>
                          <!-- 下边右下角 -->
                          <div class="div2-youxia">

                          </div>
                      </div>
                </div>
                <!-- 下方列表 -->
                <div class="right-bottom">
                    <ul>
                        <li>小米Note系列累计销量已超3亿台，最新</li>
                        <li>午夜更新!全国现有高中风险区2639+1946</li>
                        <li>新机不香了?iPad10发售首日就“破发”，部分</li>
                        <li>双十一尾款人上线，今晚8点付尾款!情报员:</li>
                        <li>小米Note系列累计销量已超3亿台，最新</li>
                        <li>午夜更新!全国现有高中风险区2639+1946</li>
                        <li>新机不香了?iPad10发售首日就“破发”，部分</li>
                        <li>双十一尾款人上线，今晚8点付尾款!情报员:</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>